<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-05 14:35:18
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-16 14:56:15
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="container_page">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions"></action-bar>
    <view class="main">
      <uni-section title="基本信息" type="line">
        <view class="formItem">
          <view class="label">服务类型</view>
          <picker mode="selector" class="content" disabled :range="serviceType" range-key="text"
            @change="serviceTypeChange($event)">
            <view :style="{ color: form.showServiceType ? '#333' : '#999' }">{{ form.showServiceType || '请选择服务类型' }}
            </view>
          </picker>
        </view>

        <view class="formItem">
          <view class="label">项目名称</view>
          <input class="content" v-model="form.name" disabled placeholder="请输入项目名称" />
        </view>

        <view class="formItem">
          <view class="label">项目负责人</view>
          <input class="content" v-model="form.showLeader" disabled placeholder="" />
        </view>

        <view class="formItem">
          <view class="label">项目所在地区</view>
          <input class="content" v-model="form.areaName" disabled placeholder="" />
        </view>

        <view class="formItem_doubleRow">
          <view class="label">项目详细地址</view>
          <view class="content">{{ form.address }}</view>
        </view>

        <view class="formItem">
          <view class="label">技术负责人</view>
          <picker mode="selector" class="content" disabled :range="directorList" range-key="name"
            @change="directorChange($event)">
            <view :style="{ color: form.showDirector ? '#333' : '#999' }">{{ form.showDirector || "请选择技术负责人" }}</view>
          </picker>
        </view>

        <!-- 执业人员 -->
        <view class="formItem">
          <view class="label">执业人员</view>
          <ld-select class="contents" :multiple="true" disabled :list="practList" label-key="name" value-key="staffId"
            placeholder="" v-model="form.staffIdList" @change="practChange"></ld-select>
        </view>
        <!-- 委托单位 -->
        <view class="formItem">
          <view class="label">委托单位</view>
          <input class="content" v-model="form.entrustUnit" disabled placeholder="请输入委托单位" />
        </view>

        <!-- 委托单位联系电话 -->
        <view class="formItem">
          <view class="label">委托单位联系电话</view>
          <input class="content" v-model="form.entrustUnitPhone" disabled placeholder="请输入委托单位联系电话" />
        </view>

        <!-- 委托单位联系人 -->
        <view class="formItem">
          <view class="label">委托单位联系人</view>
          <input class="content" v-model="form.entrustContact" disabled placeholder="请输入委托单位联系人" />
        </view>

        <!-- 委托单位联系人电话 -->
        <view class="formItem">
          <view class="label">委托单位联系人电话</view>
          <input class="content" v-model="form.entrustContactPhone" disabled placeholder="请输入委托单位联系人电话" />
        </view>

        <!-- 占地面积(㎡) -->
        <view class="formItem">
          <view class="label">占地面积(㎡)</view>
          <input class="content" v-model="form.areaCovered" disabled placeholder="请输入占地面积(㎡)" />
        </view>

        <!-- 合同编号 -->
        <view class="formItem">
          <view class="label">合同编号</view>
          <input class="content" v-model="form.no" disabled placeholder="请输入合同编号" />
        </view>

        <!-- 合同签订日期 -->
        <view class="formItem">
          <view class="label">合同签订日期</view>
          <picker mode="date" class="content" disabled :value="date" :start="startDate" :end="endDate"
            @change="signChange">
            <input type="text" disabled :value="form.showSign" :placeholder="'请选择合同签订日期'" />
          </picker>
        </view>

        <!-- 合同开始时间 -->
        <view class="formItem">
          <view class="label required">合同开始时间</view>
          <picker mode="date" class="content" :value="date" disabled :start="startDate" :end="endDate"
            @change="startChange">
            <input type="text" disabled :value="form.showStart" :placeholder="'请选择合同开始时间'" />
          </picker>
        </view>

        <!-- 合同结束时间 -->
        <view class="formItem">
          <view class="label required">合同结束时间</view>
          <picker mode="date" class="content" :value="date" disabled :start="startDate" :end="endDate"
            @change="endChange">
            <input type="text" disabled :value="form.showEnd" :placeholder="'请选择合同结束时间'" />
          </picker>
        </view>
      </uni-section>

      <template v-for="item, i in form.projectServeList">
        <uni-section :title="`服务对象:${item.name}`" type="line" :key="i">
          <view class="formItem">
            <view class="label">建筑物(场所)名称</view>
            <view class="content">{{ item.name }}</view>
          </view>
          <view class="formItem">
            <view class="label">建筑物(场所)类别</view>
            <input class="content" disabled placeholder="类型" v-model="item.type" />
          </view>
          <view class="formItem" v-if="item.type == '工厂（厂房、仓库）' || item.type == '工业（装置、储罐）' || item.type == '堆场'">
            <view class="label">最高火灾危险性</view>
            <span class="content">{{ item.maxFireRisk }}</span>
          </view>
          <view class="formItem" v-if="item.type == '民用' || item.type == '工厂（厂房、仓库）'">
            <view class="label">建筑总层数</view>
            <span class="content">地上{{ item.upLayer }}层，地下{{ item.lowLayer }}层</span>
          </view>
          <view class="formItem" v-if="item.type == '民用' || item.type == '工厂（厂房、仓库）'">
            <view class="label">技术服务活动所在建筑面积(㎡)</view>
            <input class="content" disabled v-model="item.areaSize" />
          </view>
          <view class="formItem" v-if="item.type == '民用' || item.type == '工厂（厂房、仓库）'">
            <view class="label">维保(检测)楼层或部位</view>
            <input class="content" disabled v-model="item.detectionFloor" />
          </view>
          <view class="formItem" v-if="item.type == '民用' || item.type == '工厂（厂房、仓库）'">
            <view class="label">消防技术服务活动面积(㎡)</view>
            <input class="content" disabled v-model="item.totalSize" />
          </view>
        </uni-section>
      </template>
      <uni-section title="附件信息" type="line">
        <view class="formItem_doubleRow">
          <view class="label">合同附件</view>
          <view class="content">
            <encapsulation-preview :fileUrl="form.fileUrls"></encapsulation-preview>
          </view>
        </view>
        <view class="formItem_doubleRow" v-if="form.taskInfoList.length > 0">
          <view class="label">合同报告附件</view>
          <view class="cu-item flex flex-direction" v-for="(item, index) in form.taskInfoList" :key="index">
            <span>任务名称：{{ item.name }}</span>
            <span>报告时间 : {{ item.execStartTime || '暂无' }}</span>
            <view class="flex">
              <button size="mini" type="default" v-if="item.execStartTime" class="btn"
                @click="navTo(item)">查看执业记录</button>
              <encapsulation-preview :fileUrl="'/profile' + item.reportFileUrls[0]"></encapsulation-preview>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
  </view>
</template>

<script>
import EncapsulationPreview from '../agency/components/EncapsulationPreview.vue';
import uploadImg from '@/components/upload/upload-img.vue'

export default {
  components: { uploadImg, EncapsulationPreview },
  data() {
    return {
      // 服务类型列表
      serviceType: [
        {
          text: '维护保养检测',
          value: '1'
        },
        {
          text: '消防安全评估',
          value: '2'
        }
      ],
      // 导航栏参数
      navOptions: {
        left: {
          icon: 'back',
        },
        center: {
          title: '查看报告',
        }
      },
      projectId: '',
      // 项目负责人列表
      leaderList: [],
      // 技术负责人列表
      directorList: [],
      // 执业人员列表
      practList: [],
      form: {
        name: '', // 项目名称
        serviceType: '', // 服务类型
        projectHead: '', // 项目负责人
        area: [], // 项目所在地区
        address: '', // 项目详细地址
        technologyHead: '', // 技术负责人
        staffIdList: [], // 执业人员
        entrustUnit: '', // 委托单位
        entrustUnitPhone: '', // 委托单位联系电话
        entrustContact: '', // 委托单位联系人
        entrustContactPhone: '', // 委托单位联系人电话
        areaCovered: '', // 占地面积(㎡)
        no: '', // 合同编号
        signDate: '', // 合同签订日期
        startDate: '', // 合同开始时间
        endDate: '', // 合同结束时间
        showServiceType: '', // 服务类型回显
        showLeader: '', // 项目负责人回显
        showDirector: '', // 技术负责人回显
        showSign: '', // 合同签订日期回显
        showStart: '', // 合同开始时间回显
        showEnd: '', // 合同结束时间回显
        taskInfoList: [],
        projectServeList: [
          {
            upLayer: 0,
            lowLayer: 0
          }
        ]
      },
      loading: false,

      date: null,
      startDate: null,
      endDate: null
    }
  },
  onLoad(options) {
    this.projectId = options.id
  },
  mounted() {
    Promise.all([this.getLeaderInfo()]).then(res => {
      if (res && this.projectId) {
        this.getForm()
      }
    })
  },
  methods: {
    // 表单
    getForm() {
      if (this.loading) return
      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });
      this.$store.dispatch('getDetailInfo', this.projectId).then(data => {
        this.form = data
        this.form.showSign = this.form.signDate // 合同签订日期回显
        this.form.showStart = this.form.startDate // 合同开始时间回显
        this.form.showEnd = this.form.endDate // 合同结束时间回显
        // 格式化回显项目负责人
        this.leaderList.forEach(item => {
          if (data.projectHead == item.staffId) {
            this.form.showLeader = item.name
          }
        })
        // 格式化回显技术负责人
        this.directorList.forEach(item => {
          if (data.technologyHead == item.staffId) {
            this.form.showDirector = item.name
          }
        })
        // 格式化回显服务类型
        let serviceType
        this.serviceType.forEach((item) => {
          if (data.serviceType == item.value) {
            serviceType = item.text + ',';
          }
        });
        this.form.showServiceType = serviceType.substring(0, serviceType.length - 1);
      }).finally(() => {
        let timer = setTimeout(() => {
          this.loading = false
          uni.hideLoading();
          clearTimeout(timer)
        }, 3000);
      })
    },
    // 下一步
    next() {
      this.step.curStep = this.step.curStep + 1
    },
    // 上一步
    goback() {
      this.step.curStep = this.step.curStep - 1
    },
    // 选择服务类型change
    serviceTypeChange(e) {
      this.form.serviceType = this.serviceType[e.detail.value].value
      this.form.showServiceType = this.serviceType[e.detail.value].text
    },
    // 选择项目负责人change
    leaderChange(e) {
      this.form.projectHead = this.leaderList[e.detail.value].staffId
      this.form.showLeader = this.leaderList[e.detail.value].name
    },
    // 技术负责人change
    directorChange(e) {
      this.form.technologyHead = this.directorList[e.detail.value].staffId
      this.form.showDirector = this.directorList[e.detail.value].name
    },
    // 执业人员change
    practChange(value) {
      this.form.staffIdList = value
    },
    // 合同签订日期change
    signChange(e) {
      this.form.signDate = e.detail.value
      this.form.showSign = e.detail.value
    },
    // 合同开始时间change
    startChange(e) {
      this.form.startDate = e.detail.value
      this.form.showStart = e.detail.value
    },
    // 合同结束时间change
    endChange(e) {
      this.form.endDate = e.detail.value
      this.form.showEnd = e.detail.value
    },

    // 异步获取项目负责人列表信息
    getLeaderInfo() {
      return new Promise((resolve, reject) => {
        this.$store.dispatch('getLeaderDepLists').then((data) => {
          if (data && data.code === 200) {
            this.leaderList = data.data.projectList
            this.practList = data.data.practiceList
            this.directorList = data.data.techList
            resolve(true)
          } else {
            reject(false)
          }
        })
      })
    },
    // 前往查看执业记录
    navTo(item) {
      let taskId = item.taskId
      this.$store.commit('save_task_name', item.name)
      this.$store.commit('changePracticeState', 'look')
      uni.navigateTo({
        url: "../../pages_workTableChild/manage/InfoMation?taskId=" + taskId + '&projectId=' + this.form.projectId,
      });
    }
  },
  computed: {
    // 底部导航栏高度 单位px
    navigationBarHeight() {
      return uni.getStorageSync("menuInfo").navigationBarHeight || uni.getStorageSync("menuInfo").statusBarHeight / 2;
    },
    // 底部菜单padding掉导航栏的位置
    paddingBottom() {
      if (this.navigationBarHeight) {
        return "padding-bottom:" + this.navigationBarHeight + "px;";
      }
      else {
        return "";
      }
    }
  },
}
</script>
<style lang="scss" scoped>
@import "./stepStyles.scss";

::v-deep .uni-section {
  margin-top: 0;
  background-color: transparent;
}

::v-deep .contents>.input {
  background-color: #fff !important;
  border-radius: 0 !important
}
</style>